<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </script>
    <style>
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        form,
        fieldset,
        input,
        textarea,
        p,
        blockquote,
        th,
        td,
        tr,
        table {
            margin: 0;
            padding: 0;
            -webkie-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        ol,
        ul {
            list-style: none;
        }
        
        iframe {
            border: none;
        }
        
        a {
            text-decoration: none;
            color: #666;
        }
        
        a:focus,
        a:hover {
            text-decoration: none;
        }
        
        .center {
            text-align: center;
        }
        
        .label {
            text-shadow: none;
            background: none;
            color: #666;
            font-weight: 400;
            margin-bottom: 0;
        }
        
        .dn {
            display: none;
        }
        
        .db {
            display: block;
        }
        
        .pr {
            position: relative;
        }
        
        .pa {
            position: absolute;
        }
        
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        /*.clearfix {clear: both;}*/
        
        .clearfix {
            zoom: 1;
        }
        
        .clearfix:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0;
            font-size: 0;
        }
        
        body {
            width: 800px;
            margin: 0 auto;
            font-size: 14px;
            padding: 10px 0px;
        }
        
        .header {
            background: white;
            height: 148px;
            padding: 10px;
        }
        
        .header img {
            width: 62px;
            height: 58px;
        }
        
        .header .transportation {
            font-size: 20px;
            font-weight: bolder;
            margin-top: 15px;
        }
        
        .header .time {
            margin-top: 7px;
        }
        
        .header .spanColor {
            color: #FF9900;
            font-size: 20px;
            font-weight: bold;
            padding: 0 5px;
        }
        
        .header a {
            color: #00ccff;
            text-decoration: underline;
            margin-left: 5px;
        }
        
        .detailData {
            margin-top: 2px;
            background: white;
            width: 735px;
            height: 115px;
            padding-top: 25px;
        }
        
        .detailData ul {
            display: inline-block;
            height: 60px;
        }
        
        .detailData li {
            list-style: none;
            height: 85px;
        }
        
        .detailData .line {
            display: inline-block;
            width: 1px;
            background: #ccc;
            height: 85px;
        }
        
        .detailData .data {
            width: 180px;
            text-align: center;
        }
        
        .detailData span {
            border-bottom: none;
            color: #00ccff;
            font-size: 32px;
            font-weight: 400;
            border-bottom:none !important;
        }
        
        .detailData p {
            color: #ccc;
        }
        
        .assessment {
            margin-top: 20px;
        }
        
        .assessment .assessmentTop {
            background: #99ccff;
            padding: 0 5px;
            width: 100%;
            height: 30px;
            list-style: 30px;
        }
        
        .aTopLeft {
            line-height: 30px;
            color: white;
        }
        
        .aTopRight {
            margin-top: 7px;
        }
        
        #assessment {
            width: 100%;
            height: 270px;
            background: white !important;
        }
        
        .regional .regionalTop {
            background: #99ccff;
            padding: 0 5px;
            width: 100%;
            height: 30px;
            list-style: 30px;
            color: white;
            margin-top: 20px;
        }
        
        .regionalTop .rTopLeft {
            line-height: 30px;
        }
        
        .regionalTop .rTopRight {
            margin-top: 7px;
        }
        
        #regional {
            width: 100%;
            height: 100px;
            background: white;
        }
        
        .alarm {
            margin-top: 20px;
        }
        
        .alarmTop {
            background: #99ccff;
            padding: 0 5px;
            width: 100%;
            height: 30px;
            list-style: 30px;
            color: white;
        }
        
        .alarmTop .rTopLeft {
            line-height: 30px;
        }
        
        .alarmTop .rTopRight {
            margin-top: 7px;
        }
        
        .alarmBottom {
            height: 300px;
            background: white;
        }
        
        #abLeft {
            width: 40%;
            height: 100%;
        }
        
        #abRight {
            width: 58%;
            height: 100%;
        }
        
        .regionalBottom {
            background: white;
            height: auto;
        }
        
        .regionalBottom table {
            border-collapse: collapse;
            width: 1100px;
        }
        
        .regionalBottom tr th {
            height: 35px;
            border-collapse: collapse;
            border: 1px solid #ccc;
            font-weight: normal;
        }
        
        .regionalBottom td {
            height: 35px;
            border-collapse: collapse;
            border: 1px solid #ccc;
        }
        /* #ajax-loading,#mask{display:block;} */
        
        #leftCity li,
        #rightCity li {
            cursor: pointer;
        }
        
        .alarm .barechart .list {
            cursor: pointer;
        }
        
        tr,
        th,
        td {
            border: 1px solid #dedede;
        }
        
        th,
        td {
            height: 25px;
            padding: 0 10px;
        }
        
        body ol,
        body ul,
        body .qmbox ul li {
            list-style: none;
        }
        
        .qmbox ul li {
            list-style: none !important;
        }
    </style>

</head>

<body id='mailContentContainer' >
	<div style="border: 3px solid #eeeaea ;width: 1125px;">
	<div style="padding: 10px 10px;">
    <div class="header">
        <img src="$!{pic}/image/pic/email/icon.png" alt="">
        <p class="transportation">尊敬的&nbsp;$!{contacts}，您好：</p>
        <p class="time">
        	<span>$!{year}</span>
        	<span class="spanColor" style='color: #FF9900;font-size: 20px;font-weight: bold;padding: 0 5px;'>$!{timeType}</span>
        	<span>$!{detail}</span>&nbsp;&nbsp;&nbsp;&nbsp;排名第&nbsp;
        	<span class="spanColor">$!{order}</span>&nbsp;名</p>
    </div>
    <div class="detailData">
        <ul class="clearfix">
            <li class="data fl">
                <span>$!{vehicleCount}</span>
                <p>车辆总数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
                <span>$!{vehicleNetCount}</span>
                <p>入网总数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
                <span>$!{enterpriseCount}</span>
                <p>业户数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
                <span>$!{dealRate} %</span>
                <p>处警率</p>
            </li>
        </ul>
    </div>

    <div class="regional">
        <div class="regionalTop clearfix" style='width:1100px'>
            <div class='fl rTopLeft'>
            	$!{tableTitle}
            </div>
        </div>
       <div class="regionalBottom"><table cellspacing='0'>
       		<thead bgcolor='#eee' style="font-size:12px; text-align:left;"> 
       			$!{tableHead}
       		</thead>
            <tbody id="table" style="font-size:12px;">
               $!{resultList}
            </tbody>
            </table>
        </div>
    </div>
     </div>
    </div>
</body>

</html>